<template>
    <div>
        <div class="container">
            <TableCustom :columns="columns" :tableData="tableData" :hasPagination="false">
                <template #h_status="{rows}">
                    <el-tag v-if="rows.h_status == 1" type="success">正常</el-tag>
                    <el-tag v-else type="danger">禁用</el-tag>
                </template>
                <template #operator="{rows}">
                    <el-button type="warning" @click="handleRoleOption(rows)">权限配置</el-button>
                </template>
            </TableCustom>
            <el-dialog title="权限配置" v-model="primsRole" width="500px" destroy-on-close
                :close-on-click-modal="false" @close="closePrimsRoleDialog">
                <el-tree
                    v-if="primsRole"
                    style="max-width: 300px;"
                    :data="primsCoorData"
                    show-checkbox
                    ref="treeRef"
                    node-key="m_code"
                    :default-checked-keys="defaultCheckedKeys"
                    :props="primsDefaultProps"
                />
                <el-button style="margin-top: 20px; margin-left: 200px" type="warning" @click="savePrimss">保存权限</el-button>
            </el-dialog>
        </div>
    </div>
</template>

<script setup lang="ts" name="collaborativeAdministrator-user">
import { ref } from 'vue';
import { ElMessage, ElMessageBox, ElTree } from 'element-plus';
import { cooperation_role_list, query_cooperation_module, query_role_module_cooperation, update_role_module } from '@/api';


// 表格相关
let columns = ref([
    // { prop: 'h_user_id', label: '用户id' },
    { prop: 'y_role_name', label: '角色名' },
    { prop: 'y_role_code', label: '角色id' },
    { prop: 'operator', label: '操作', width: 250 },
])
const tableData = ref([]);
const getData = async () => {
    const res = await cooperation_role_list()
    tableData.value = res.data;
    // page.total = res.data.total;
};
getData();


// 权限配置
const primsRole = ref(false)
const primsCoorData = ref([])
const selectRouter = ref([])
const defaultExpandedKeys = ref([3])
const defaultCheckedKeys = ref([])
const treeRef = ref<InstanceType<typeof ElTree>>()
const rolePrmis = ref({y_role_code: ''})

const primsDefaultProps =  {
  label: 'm_name',
}
const closePrimsRoleDialog = () => {
    primsRole.value = false
}
query_cooperation_module().then(res => {
    if(res.code == '1000') {
        // primsRole.value = true
        primsCoorData.value = res.data
    }
})
const handleRoleOption = (row) => {
    defaultCheckedKeys.value = []
    rolePrmis.value = row
    query_role_module_cooperation({o_role_id: row.y_role_code}).then(res => {
        if (res.code == '1000') {
            selectRouter.value = res.data
            selectRouter.value.forEach(item => {
                defaultCheckedKeys.value.push(item.m_code)
            })
            // console.log(defaultExpandedKeys.value)
            primsRole.value = true
        }
    })
}
const savePrimss = (data) => {
    let checkedKeys = JSON.parse(JSON.stringify(treeRef.value.getCheckedNodes()))
    console.log(checkedKeys)
    update_role_module({o_role_id: rolePrmis.value.y_role_code, role_module_list: checkedKeys}).then(res => {
       if(res.code == '1000') {
            ElMessage.success('权限设置成功');
            primsRole.value = false
            defaultExpandedKeys.value = []
            defaultCheckedKeys.value = []
       }
    })
   
}

</script>

<style scoped></style>